<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<title>中国象棋 online</title>
		<link rel="stylesheet" type="text/css" href="./css/view.css"/>
		<!--<link href="./css/css/font-awesome.css" rel="stylesheet">-->
		<script>
			(function() {
				//rem 与屏幕/字体大小比例计算
				var userFontSize = parseFloat(getComputedStyle(document.documentElement, false)['fontSize']);//返回用户现用的屏幕字体大小
				var ratio = 16 / userFontSize;
				var fontSize = (innerWidth / 1536 * 0.625) * 10 * ratio;
				document.documentElement.style.fontSize = fontSize + "rem";//rem 是相对于 HTML 根元素（<html>）的字体大小的单位。用户更改浏览器的字体大小可以直接改变这里字体大小，自适应更好
//				if(innerWidth<=768){
//					var userFontSize = parseFloat(getComputedStyle(document.documentElement, false)['fontSize']);
//					var ratio = 16 / userFontSize;
//					var fontSize = (innerWidth / 1536 * 0.625) * 10 * ratio;
//					document.documentElement.style.fontSize = fontSize + "rem";
//				}
				//				window.onresize = function() {
				//					fontSize = (innerWidth / 1536 * 0.625) * 10 * ratio;
				//					document.documentElement.style.fontSize = fontSize + "rem";
				//}
			})();
		//默认属性
		let blackJuCountdownSeconds=10*60;
        let blackBuCountdownSeconds=30;
        let redJuCountdownSeconds=10*60;
        let redBuCountdownSeconds=30;
		let Buseconds_save;
        let begincolor="red";
<!--这些参数必须加载页面之前就要定下来所以必须在head就加载-->
	  (function() {
    // 获取URL的查询字符串部分
    var queryString = window.location.search.substring(1); // 去掉开头的问号

    // 创建URLSearchParams对象
    var params = new URLSearchParams(queryString);
    // 获取查询参数的值
    var juShi = params.get('juShi');
    var buShi = params.get('buShi');
    var woFang = params.get('woFang');

    // 在页面上显示或处理这些值
    console.log('juShi:', juShi);
    console.log('buShi:', buShi);
    console.log('woFang:', woFang);
	
	begincolor=woFang;
	console.log(begincolor);
	Busecond_save=redBuCountdownSeconds=blackBuCountdownSeconds=Number(buShi);
	redJuCountdownSeconds=blackJuCountdownSeconds=Number(juShi)*60;})();
			
		</script>
        <!--<script src="js/lodash_4.17.21_dist_lodash.core.js"></script>-->
		<!--<script src="http://livejs.com/live.js"></script>-->
		<!--<script src="js/live.js"></script>-->
		<!--<script src="js/socket.io.min.js"></script>-->  <!--socket.io是一个为实时双向通信而设计的库，它建立在WebSockets之上-->
		<!--<script src="js/axios0.18.min.js"></script> 这行代码的axios0.18.min是一个外部库，其是基于promise的一个http客户端，在线版象棋功能用不上 -->
        
	</head>

	<body>
<div id="box">
   
        <div class="map-container">
            <div class="timer_container" id="uplist">
              <div id="video">视频画面</div>
                <div class="timer-wrapper">
                    <span class="label">局时：</span>
                    <span class="countdown" id="black-ju-countdown">00:00</span>
                </div>
                <div class="timer-wrapper">
                    <span class="label">步时：</span>
                    <span class="countdown" id="black-bu-countdown">00:00</span>
                </div>
            </div>
            <canvas id="map"></canvas>
            
            <audio src="audio/MOVE.WAV" hidden="hidden" id="audioClick"></audio>
            <audio src="audio/go.wav" hidden="hidden" id="audioGo"></audio>
            <audio src="audio/kill.wav" hidden="hidden" id="audioKill"></audio>
            <audio src="audio/dong.wav" hidden="hidden" id="audioEat"></audio>
            <audio src="audio/timeout.mp3" hidden="hidden" id="audiotimeout"></audio>
     
            <div class="horizontal-container" id="downlist">
                <div class="timer_container" id="red-team-timer">
                    <div class="timer-wrapper">
                        <span class="label">局时：</span>
                        <span class="countdown" id="red-ju-countdown">00:00</span> 
                    </div>
                    <div class="timer-wrapper">
                        <span class="label">步时：</span>
                        <span class="countdown" id="red-bu-countdown">00:00</span> 
                    </div>
                </div>
                
                <div class="button-container">
                    <button id="surrender" class="game-button">投降</button>
                    <button id="draw-offer" class="game-button">提和</button>
                    <button id="undo-move" class="game-button">悔棋</button>
                </div>
            </div>
        </div>
        
</div>
       
       <!-- 模态窗口 -->
<div id="drawModal" class="modal">
  <div class="modal-content">
    <p>对方请求求和，是否同意？</p>
    <button id="agreeDraw">同意</button>
    <button id="rejectDraw">拒绝</button>
  </div>
</div>

       <!-- 模态窗口 -->
<div id="regretModal" class="modal">
  <div class="modal-content">
    <p>对方请求悔棋，是否同意？</p>
    <button id="agreeregret">同意</button>
    <button id="rejectregret">拒绝</button>
  </div>
</div>     
		<script type="text/javascript" src="js/map3.js"></script>
	</body>

</html>
